<template>
  <div class="buyer-payment-notice">
    <h3>买方交款通知单</h3>
    <div style="text-align: left">交款人买方：{{ data.buyerName }}</div>
    <div style="text-align: left; margin-bottom: 8px">
      房屋坐落：{{ data.propertyLocation }}
    </div>
    <table
      border="1"
      cellspacing="0"
      cellpadding="5"
      style="border-collapse: collapse"
    >
      <thead>
        <tr>
          <th></th>
          <th>应交(元)</th>
          <th>小计(元)</th>
          <th>实交(元)</th>
          <th>小计(元)</th>
          <th>欠款(元)</th>
          <th>小计(元)</th>
          <th>应交时间</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>服务费</td>
          <td>
            {{ data.serviceFeeDue }}
          </td>
          <td rowspan="2">
            {{ data.serviceFeeDue + data.transactionFeeDue }}
          </td>
          <td>
            {{ data.serviceFeePaid }}
          </td>
          <td rowspan="2">
            {{ data.serviceFeePaid + data.transactionFeePaid }}
          </td>
          <td>{{ serviceFeeBalance }}</td>
          <td rowspan="2">{{ serviceFeeBalance + transactionFeeBalance }}</td>
          <td>
            {{ data.serviceFeeDueTime }}
          </td>
        </tr>
        <tr>
          <td>交易费</td>
          <td>
            {{ data.transactionFeeDue }}
          </td>
          <!-- <td>{{ data.transactionFeeDue }}</td> -->
          <td>
            {{ data.transactionFeePaid }}
          </td>
          <!-- <td>{{ data.transactionFeePaid }}</td> -->
          <td>{{ transactionFeeBalance }}</td>
          <!-- <td>{{ data.transactionFeeDue - data.transactionFeePaid }}</td> -->
          <td>
            {{ data.transactionFeeDueTime }}
          </td>
        </tr>
        <tr>
          <td>服务费代收</td>
          <td>
            {{ data.serviceFeeProxyDue }}
          </td>
          <td rowspan="2">
            {{ data.serviceFeeProxyDue + data.transactionFeeProxyDue }}
          </td>
          <td>
            {{ data.serviceFeeProxyPaid }}
          </td>
          <td rowspan="2">
            {{ data.serviceFeeProxyPaid + data.transactionFeeProxyPaid }}
          </td>
          <td>{{ serviceFeeProxyBalance }}</td>
          <td rowspan="2">
            {{ serviceFeeProxyBalance + transactionFeeProxyBalance }}
          </td>
          <td>
            {{ data.serviceFeeProxyDueTime }}
          </td>
        </tr>

        <tr>
          <td>交易费代收</td>
          <td>
            {{ data.transactionFeeProxyDue }}
          </td>
          <!-- <td>{{ data.transactionFeeDue }}</td> -->
          <td>
            {{ data.transactionFeeProxyPaid }}
          </td>
          <!-- <td>{{ data.transactionFeePaid }}</td> -->
          <td>{{ transactionFeeProxyBalance }}</td>
          <!-- <td>{{ data.transactionFeeDue - data.transactionFeePaid }}</td> -->
          <td>
            {{ data.transactionFeeProxyDueTime }}
          </td>
        </tr>
        <!-- 其他行类似 -->
        <tr>
          <td>合计</td>
          <td>{{ totalDue }}</td>
          <td>{{ totalDue }}</td>
          <td>{{ totalPaid }}</td>
          <td>{{ totalPaid }}</td>
          <td>{{ totalOwed }}</td>
          <td>{{ totalBalance }}</td>
          <td></td>
        </tr>
        <tr>
          <td>定金</td>
          <td colspan="3">
            {{ data.depositAmount }}
          </td>
          <td>大写金额</td>
          <td colspan="3">{{ data.depositAmountInWords }}</td>
        </tr>
        <tr>
          <td>房款</td>
          <td colspan="3">
            {{ data.housePriceAmount }}
          </td>
          <td>大写金额</td>
          <td colspan="3">{{ data.housePriceAmountInWords }}</td>
        </tr>
        <tr>
          <td>签约店面</td>
          <td colspan="3">{{ data.regionName + "" + data.storeName }}</td>
          <td>申请人</td>
          <td colspan="3">{{ data.applicantName }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { reactive, computed, watch, defineProps } from "vue";

const props = defineProps({
  fData: {
    type: Object,
    required: true,
  },
});

// const emit = defineEmits(["update:fData"]);
const data = reactive({ ...props.fData });
// watch(data, () => emit("update:fData", data), { deep: true });
const calculateOwed = (type) => {
  return data[type + "Due"] - data[type + "Paid"];
};
//服务费欠款
const serviceFeeBalance = computed(() => {
  data.serviceFeeBalance = data.serviceFeeDue - data.serviceFeePaid;
  return data.serviceFeeBalance;
});

//交易费欠款
const transactionFeeBalance = computed(() => {
  data.transactionFeeBalance = data.transactionFeeDue - data.transactionFeePaid;
  return data.transactionFeeBalance;
});

//服务费代收欠款
const serviceFeeProxyBalance = computed(() => {
  data.serviceFeeProxyBalance =
    data.serviceFeeProxyDue - data.serviceFeeProxyPaid;
  return data.serviceFeeProxyBalance;
});

//交易费代收欠款
const transactionFeeProxyBalance = computed(() => {
  data.transactionFeeProxyBalance =
    data.transactionFeeProxyDue - data.transactionFeeProxyPaid;
  return data.transactionFeeProxyBalance;
});

const totalDue = computed(() => {
  console.log(Object.keys(data).filter((key) => key.endsWith("Due")));
  return Object.keys(data)
    .filter((key) => key.endsWith("Due"))
    .reduce((sum, key) => sum + Number(data[key]), 0);
});

const totalPaid = computed(() => {
  return Object.keys(data)
    .filter((key) => key.endsWith("Paid"))
    .reduce((sum, key) => sum + Number(data[key]), 0);
});

const totalOwed = computed(() => {
  return totalDue.value - totalPaid.value;
});

const totalBalance = computed(() => {
  return (
    serviceFeeBalance.value +
    transactionFeeBalance.value +
    serviceFeeProxyBalance.value +
    transactionFeeProxyBalance.value
  );
});
const form = ref();
</script>

<style scoped>
.buyer-payment-notice {
  text-align: center;
}

table {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #000;
  padding: 5px;
  text-align: center;
}
</style>
